<!--
 * @Description:热门活动
 -->
<template>
  <div>
    <div class="hotTitle">{{hotTitle}}</div>
    <img class="hotBanner" :src="bannerImg">
    <div class="hotJobList">
      <div v-for="hotJob in hotJobList" :key="hotJob.id" class="hotJob" @click="taskDetail(hotJob.taskNo)">
        <div class="jobname">{{hotJob.taskName}}</div>
        <div class="jobprice">¥ {{hotJob.taskMoney}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  props: {
    'hotTitle': [String],
    'bannerImg': [String],
    'hotJobList': [Array]
  },
  data () {
    return {

    }
  },
  methods: {
    taskDetail (taskNo) {
      const token = localStorage.getItem('TOKEN')
      if (token) {
        this.$router.push({
          name: 'detailTask',
          query: {
            id: taskNo
          }
        })
      } else {
        Dialog.confirm({
          title: '提示',
          message: '登录后可查看任务详情',
          confirmButtonText: '去登录',
          cancelButtonText: '取消'
        }).then(() => {
          // on confirm
          this.$router.push({ name: 'login' })
        }).catch(() => {
        // on cancel
        })
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
  .hotTitle{
    font-size: 16px;
    color: #101010;
    line-height: 40px;
    margin-left: 10px;
  }
  .hotBanner{
    display: block;
    width: 95%;
    margin: 0 auto;
    border-radius: 5px;
  }
  .hotJobList{
    margin: 10px 0;
    padding-left: 10px;
  }
  .hotJobList .hotJob{
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #555555;
    border-bottom: 1px solid #D7D7D7;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }
  .hotJobList .jobprice{
    margin-right: 10px;
  }
</style>
